<template>
	<el-scrollbar>
		<view class="flex items-center ml-5px">
			<view
				class="tag-item flex items-center cursor-pointer justify-center"
				:class="{ activate: tag.url === routeStore.currentActiveRoute }"
				v-for="tag in routeStore.tagRouteList"
				:key="tag.menu_id"
				@click.stop="tagClick(tag.url)"
				@contextmenu.prevent="onContextmenu(tag, $event)"
			>
				<view class="dot mr-10px"></view>
				<!--  -->
				<dx-icon size="14" v-if="themeStore.isShowTagsViewIcon" :name="tag.icon"></dx-icon>
				<text class="mr-8px" :class="{ 'ml-8px': themeStore.isShowTagsViewIcon }">{{ tag.name }}</text>
				<dx-icon name="close" :color="tagColor(tag.url)" class="close" size="14" @click.stop="clickIcon(tag.url)"></dx-icon>
			</view>
			<span class="scrollbar-item p-1px"></span>
		</view>
	</el-scrollbar>
	<!-- 右键菜单 -->
	<dx-context-menu ref="contextRef" @menuClick="menuClick"></dx-context-menu>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { useRouteStore } from '@/uni_modules/dx-admin/stores/routes';
import { useThemeStore } from '@/uni_modules/dx-admin/stores/theme';
const routeStore = useRouteStore(),
	themeStore = useThemeStore(),
	contextRef = ref();

const tagColor = computed(() => (url: string) => url === routeStore.currentActiveRoute ? '#409eff' : '#9e9e9e');

const clickIcon = function (url: string) {
	routeStore.removeTagRouteList(url);
};
const tagClick = function (url: string) {
	if (url === routeStore.currentActiveRoute) {
		uni.redirectTo({
			url,
		});
	} else {
		uni.navigateTo({
			url,
		});
	}
};
// 当前右键菜单的项
const currentItem = ref<any>({});
// 右键菜单
const onContextmenu = function (item: any, event: any) {
	currentItem.value = item;
	contextRef.value?.open(
		[
			{ name: 'close', label: '关闭当前', icon: 'close', disabled: routeStore.homePage == item.url },
			{ name: 'closeRight', label: '关闭右侧标签', icon: 'logout' },
			{ name: 'closeOther', label: '关闭其他标签', icon: 'minus' },
			{ name: 'closeAll', label: '关闭全部标签', icon: 'power', divided: true },
		],
		{
			x: event.clientX,
			y: event.clientY,
		}
	);
};
// 右键菜单点击事件
const menuClick = function (row: any) {
	if (row.name === 'close') {
		routeStore.removeTagRouteList(currentItem.value.url);
	} else {
		routeStore.removeTagRouteList(currentItem.value.url, row.name);
	}
};
</script>
<style lang="scss" scoped>
.tag-item {
	flex-shrink: 0;
	height: 35px;
	padding: 0 12px;
	color: #9e9e9e;
	&:not(:last-child) {
		border-right: 1px solid #f6f6f6;
	}
	.dot {
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background-color: #d4d4d4;
	}
	&:hover,
	&.activate {
		color: var(--el-color-primary);
		.dot {
			background-color: var(--el-color-primary);
		}
		&::v-deep {
			path {
				stroke: var(--el-color-primary) !important;
			}
		}
	}
	.close {
		&:hover {
			background-color: var(--el-color-primary);
			color: #ffffff;
			&::v-deep {
				path {
					stroke: #ffffff !important;
				}
			}
		}
	}
}
</style>
